import { View, Text, Input, Icon } from '@tarojs/components'

import './index.less'

const FormGroup = props => {
  const { label, type, value, placeholder, input, disabled, clear, keyboardHeightChange, confirm } = props
    
  return (
    <View className="form-group">
      <Text className="label">{ label }</Text>
      <View>
        <Input
          type={ type }
          value={ value }
          placeholder={ placeholder }
          placeholderClass="placeholder"
          onInput={ input }
          disabled={ disabled }
          onKeyboardHeightChange={ keyboardHeightChange }
          onConfirm={ confirm }
        />
        <Icon
          style={{ visibility: value ? 'visible' : 'hidden' }}
          onClick={ clear }
          size="16"
          type="clear"
          color="#9f9f9f"
        />
        { props.children }
      </View>
    </View>
  )
}

export default FormGroup